<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字：<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数：<span id="count">0</span>
    <br>
    结果：<span id="result"></span>

    <script>
        var inputE = document.querySelector('#number');
        var countE = document.querySelector('#count');
        var resultE = document.querySelector('#result');
        var btn = document.querySelector('#button');
        var resetBtn = document.querySelector('#reset');

        //随机生成一个1-100的数字
        var guess = Math.floor(Math.random() * 100) + 1 
        var count = 0;
        btn.onclick = function() {
            count++;
            countE.innerHTML = count;

            var userGuess = parseInt(inputE.value);
            if (userGuess == guess) {
                resultE.innerHTML = "猜对了";
                resultE.style = "color: gray;";
            } else if (userGuess < guess) {
                resultE.innerHTML = "猜小了";
                resultE.style = "color: blue;";
            } else {
                resultE.innerHTML = "猜大了";
                resultE.style = "color: red;";
            }
        }

        resetBtn.onclick = function() {
            guess = Math.floor(Math.random() * 100) + 1
            count = 0;
            countE.innerHTML = count;
            resultE.innerHTML = "";
            inputE.value = "";
        }

    </script>

</body>
</html>